// 创建地图
var map= new AMap.Map("mapId",{
    	zoom: 11,//放大倍数
    	center: [116.397428, 39.90923], //中心
    	resizeEnable: true
});
// 设置语言['en', 'zh_en', 'zh_cn']
map.setLang('zh_en');
// 设置控件对象
var toolBar = new AMap.ToolBar(),
    overView = new AMap.OverView(),
    scale = new AMap.Scale();
// 将控件添加到当前地图中
    map.addControl(toolBar);
    map.addControl(overView);
    map.addControl(scale);
// 设置mark标记
var marker = new AMap.Marker({
	map: map,
	position: [116.397428, 39.90923]
});
//设置自动补全框 
var auto = new AMap.Autocomplete({
    input: "auto"
});
// auto输入框事件
$(document).ready(function(){
	$("#auto").click(function(e){
		e.stopPropagation();
		$(this).removeAttr("placeholder");
		$(".autoSub").addClass("hide_flag").show();
	})
	$(document).click(function(){
		if($(".autoSub").hasClass("hide_flag")){
			$(".autoSub").hide();
			$("#auto").attr({placeholder:"输入您的位置查找附近的商家"});
		}
	});
});

// 给地图加标志
map.clearMap();  // 清除地图覆盖物
var markers = [{
    icon: "../images/marker.png",
    position: [116.315729,39.992152]
}, {
    icon: "../images/marker.png",
    position: [116.315729,39.905247]
}, {
    icon: "../images/marker.png",
    position: [116.345018,39.905247]
}, {
    icon: "../images/marker.png",
    position: [116.382228,39.937205]
}, {
    icon: "../images/marker.png",
    position: [116.397679,39.903897]
}];
markers.forEach(function(marker) {
    new AMap.Marker({
        map: map,
        icon: marker.icon,
        position: [marker.position[0], marker.position[1],marker.position[2],marker.position[3],marker.position[4]],
        offset: new AMap.Pixel(-12, -36)
    });
});

// 显示地图
$("#show_map").on("click", function(e){
	var x = ($("#lightBox").width()-$("#map").width())/2;
	var y = ($("#lightBox").height()-$("#map").height())/2
	$("#lightBox").show();
	$("#map").css({"margin-left": x+"px" , "margin-top": y+"px"}).show();
});
$("#map span").on("click", function(){
	$("#lightBox").hide();
});

// 回到顶部事件
$(window).scroll(function(){
	if( $("body").scrollTop()!= 0 ){
		$("#to_Top").show();
	}
});
$("#to_Top").click(function(){
	$("body").animate({scrollTop: 0}, "slow");
	$(this).hide();
});

// 轮播图
var baEle = document.querySelector(".ba_show");//获取轮播窗口
var divEle = document.querySelector(".ba_show div");//获取装载图片div
var aEle = document.querySelectorAll(".ba_show a");//获取显示下标
var dis = 0, no = 0;
function playImg(){
	clearInterval(no);
	no = setInterval(function(){
		var index = Math.ceil(dis*(-1)/1200);
		if(index>2){
			index = 0;
		}
		changeBg(index);//改变下标颜色
		if(dis <= -3600){
			dis = 0;
		}
		if(dis%1200 ==0 && dis!=-3600){
			clearInterval(no);
			no = setTimeout(playImg, 1000);
		}
		if(dis <= -3600){
			dis = 0;
		}
		divEle.style.marginLeft = dis + "px";
		dis-=40;
	},10);
}
// 改变颜色函数
function changeBg(index){
	for(var i=0; i<aEle.length; i++){
		aEle[i].style.backgroundColor = "#fff";
	}
	aEle[index].style.backgroundColor = "#333";
}
playImg();
// 鼠标点击事件
for(var i=0; i<aEle.length; i++){
	(function(i){
		aEle[i].onclick = function(e){
			e = e || window.event;
			e.preventDefault();
			clearInterval(no);
			dis = -1200*i;
			divEle.style.marginLeft = dis + "px";
			changeBg(i);
			playImg();
		}
	})(i);
}

// 点击不同排序按钮，显示不同商铺列表
$(".shopSort").on("click", "a", function(e){
	e.preventDefault();
	$(".shop_list").hide();
	$(this).addClass("active").siblings().removeClass("active");
	var text = $(this).text();
	switch(text){
		case "默认排序":
			$(this).css({"border-left": 0});
			$(".shop_list:eq(0)").show();
			break;
		case "按成交量":
			$(".shop_list:eq(1)").show();
			break;
		case "按人气":
			$(".shop_list:eq(2)").show();
			break;
		default:
			break;
	}
});

// 百度模板编辑城市列表

postRequest("get", "../data/city.json", true, {}, function(cityData){
	$(".shopBox").load("jiexi.html", function(){
		var cityStr = baidu.template("spellCityTmpId", cityData);
		$("#cityName").html(cityStr);
	});
});

postRequest("get", "../data/city.json", true, {}, function(cityData2){
	$(".shopBox").load("jiexi.html", function(){
		var citySt = baidu.template("spellCityTmpI", cityData2);
		$("#hot").html(citySt);
	});
});
postRequest("get", "../data/city.json", true, {}, function(cityData3){
	$(".shopBox").load("jiexi.html", function(){
		var citySt = baidu.template("spellCityTmp", cityData3);
		$("#abc").html(citySt);
	});
});

// 百度模板生成隐藏菜单
postRequest("get", "../data/showList1.json", true, {}, function(menu1Data){
	$(".shopBox").load("jiexi.html", function(){
		var showList1Str = baidu.template("ulShowList1", menu1Data);
		$(".show_list1").html(showList1Str);
	});
});
postRequest("get", "../data/showList2.json", true, {}, function(menu2Data){
	$(".shopBox").load("jiexi.html", function(){
		var showList2Str_p1 = baidu.template("ulShowList2_p1", menu2Data);
		var showList2Str_p2 = baidu.template("ulShowList2_p2", menu2Data);
		$("#hotQues span").after(showList2Str_p1);
		$("#otherQues span").after(showList2Str_p2);
	});
});
postRequest("get", "../data/showList3.json", true, {}, function(menu3Data){
	$(".shopBox").load("jiexi.html", function(){
		var showList3Str = baidu.template("ulShowList3", menu3Data);
		$(".show_list3").html(showList3Str);
	});
});
postRequest("get", "../data/showList4.json", true, {}, function(menu4Data){
	$(".shopBox").load("jiexi.html", function(){
		var showList4Str = baidu.template("ulShowList4", menu4Data);
		$(".show_list4").html(showList4Str);
	});
});
// 生成热卖手机回收
postRequest("get", "../data/hotList.json", true, {}, function(hotListData){
	$(".shopBox").load("jiexi.html", function(){
		var hotRecyStr = baidu.template("hotRecycleTmpId", hotListData);
		$(".recycle dl").after(hotRecyStr);
	});
});
// 生成热卖手机回收
postRequest("get", "../data/used.json", true, {}, function(usedData){
	$(".shopBox").load("jiexi.html", function(){
		var usedStr = baidu.template("usedTmpId", usedData);
		$(".used dl").after(usedStr);
	});
});

// 点击切换城市
$(document).ready(function(){
	var cityList = $("#cityList");
	$(".topChangeCity").click(function(e){
		e.stopPropagation();
		e.preventDefault();
		cityList.appendTo(".topCity").css({"left": "68px", "top": "-24px"}).show();
		$("#cityName p").hide();
		$(".A").show();
	});
	$(document).click(function(e){	
		if($(e.target).parents("#cityList").length==0 && $(e.target).attr("id")!="cityList"){
			cityList.hide();
		}
	});
});

// shop中点击北京
$(document).ready(function(){
	var cityList = $("#cityList");
	$(".shopChangeCity").click(function(e){
		e.stopPropagation();
		e.preventDefault();
		cityList.appendTo(".left").css({"left": "-50px", "top": "13px"}).show();
		$("#cityName p").hide();
		$(".A").show();
		fnnn();
	});
	$(document).click(function(e){	
		if($(e.target).parents("#cityList").length==0 && $(e.target).attr("id")!="cityList"){
			cityList.hide();
		}
	});
});

// 城市列表内部点击拼音事件
$("#spell h3").on("click", "span", function(){
	var pClassName = "."+$(this).text();
	$(this).css({"color":"#f60", "font-weight": 700, "border":"1px solid #d9d9d9", "border-radius": "3px 3px 0 0", "border-bottom": 0}).siblings().css({"color": "#000", "font-weight": "normal","border": 0 ,"border-bottom": "1px solid #d9d9d9" });
	$("#cityName p").hide();
	$(pClassName).show();
});
// 城市列表内部点击城市名称事件
$("#cityList").on("click", "a", function(){
	var name = $(this).text();
	$(".changeCityName").text(name);
	$(".shopChangeCity").text(name);
});

// 统一设置关闭x事件
$(".closeBtn").click(function(){
	$("#cityList").hide();
});

// 悬浮菜单事件
for(let i=0; i<$("#banner li").length; i++){
	(function(i){
		$($("#banner ul").children()[i]).hover(function(){
			$(this).css({"backgroundColor": "#185"});
			$(".show_list"+(1+i)).show();
			$(this).find("span").show();
		}, function(){
			$(this).css({"backgroundColor": "rgba(0,0,0,0.5)"});
			$(".show_list"+(1+i)).hide();
			$(this).find("span").hide();
		});
	})(i)
}
var hiddenSpan = document.querySelectorAll(".hidden_menu span");
for(let i=0; i<4; i++){
	(function(i){
		$(".show_list"+(1+i)).hover(function(){
			$(this).show();
			$(hiddenSpan[i]).show();
		}, function(){
			$(this).hide();
			$(hiddenSpan[i]).hide();
		})
	})(i)
}

// 页码工具栏
function pageUtil(pageId, pageCount, currPage, callback){
	$("#"+ pageId).attr("currPage", currPage||1);
	//第一次执行pageutil绑定按钮事件
	if($("#"+ pageId).children().size() == 0){
		//处理点击事件
		$("#"+ pageId).on("click", "a", function(e){
			var targetText = $(this).text(),
				currPage = parseInt($("#"+ pageId).attr("currPage"));
			switch(targetText){
				case "首页":
					pageUtil(pageId, pageCount, 1, callback($(".red").text(), $(".shopChangeCity").attr("cityqcold")));
					break;
				case "上一页":
					pageUtil(pageId, pageCount, currPage -1, callback($(".red").text(), $(".shopChangeCity").attr("cityqcold")));
					break;
				case "下一页":
					// pageUtil(pageId, pageCount, currPage = currPage +1, callback);
					 pageUtil(pageId, pageCount, currPage +1, callback($(".red").text(), $(".shopChangeCity").attr("cityqcold")));
					break;
				case "尾页":
					pageUtil(pageId, pageCount, pageCount, callback($(".red").text(), $(".shopChangeCity").attr("cityqcold")));
					break;
				default:
					pageUtil(pageId, pageCount, parseInt(targetText), callback($(".red").text(), $(".shopChangeCity").attr("cityqcold")));
					break;
			}
		});
	}
	var frameStr =   '<a href="#maoDian" style="visibility: visible; color: rgb(102, 102, 102); background: white;">首页</a>'
					+'<a href="#maoDian" style="visibility: visible; color: rgb(102, 102, 102); background: white;">上一页</a>'
					+'<a href="#maoDian" style="color: rgb(102, 102, 102); visibility: visible; background: white;">下一页</a>'
					+'<a href="#maoDian" style="color: rgb(102, 102, 102); visibility: visible; background: white;">尾页</a>';
	//初始化翻页栏结构
	$("#"+ pageId).html(frameStr);
	//页码起始值
	var startIndex = currPage > 5 ? currPage - 4: 1;

	//创建页码html
	var numStr = "";
	for(var n = 0; startIndex<=pageCount && n<10; n++){
		numStr += (startIndex == currPage ? "<a href = '##' class='red'>"+startIndex+"</a>": "<a href = '#maoDian'>"+startIndex+"</a>");
		startIndex++;
	}

	//显示页码
	$("#"+ pageId+" a:eq(1)").after(numStr);

	callback && callback(currPage - 1, $(this).attr('cityqcold'));
}
function queryList(pn, city_id, area_id){
	$.ajax({
		url: "/shop",
		data: {
			city_id: city_id || "bei_jing",
			area_id: area_id || "",
			pagesize: 5,
			pn: pn || 0
		},
		dataType: "json",
		success: function(data){

			$(".shopBox").load("jiexi.html", function(){
		            //使用模板加载数据
					shopInfoStr = baidu.template("shopInfoTmpId", data);
					$(".shopBox").html(shopInfoStr);
		        // }
			});
			console.log(JSON.stringify(data));
		}
	});
}

function fnnn(e){
	$("#hot p a").on("click", function(){
		queryList(0, $(this).attr("cityqcold"));
		pageUtil("page", 100,1, queryList(0,$(this).attr("cityqcold")));
		$(".shopChangeCity").attr("cityqcold", $(this).attr("cityqcold"));
		$(".closeBtn").trigger('click');
	});
	$("#cityName a").on("click", function(){
		queryList(0, $(this).attr("cityqcold"));
		console.log($(this).attr("cityqcold"))
		pageUtil("page", 100,1, queryList(0,$(this).attr("cityqcold")));
		$(".shopChangeCity").attr("cityqcold", $(this).attr("cityqcold"));
		$(".closeBtn").trigger('click');	
	});
}

pageUtil("page", 100,1, queryList);	



// 点击登录
$(".loginBtn").click(function(){
	var xLogin = ($("#lightBox").width()-$("#login").width())/2;
	var yLogin = ($("#lightBox").height()-$("#login").height())/2
	$("#lightBox").show();
	if (yLogin<=0) {
		$("#login").appendTo("#lightBox").css({"top":0, "left": xLogin }).show();
	}else{
		$("#login").appendTo("#lightBox").css({"top":yLogin, "left": xLogin }).show();
	}
	// $(".uname").focus();
});
// 点击注册
var height = $("#register").height();
$(".registerBtn").click(function(){
	var xRegister = ($("#lightBox").width() - $("#register").width())/2;
	var yRegister = ($("#lightBox").height() - height)/2;
	$("#lightBox").show();
	if (yRegister<=0) {
		$("#register").appendTo("#lightBox").css({"top": 0, "left": xRegister }).show();
	}else{
		$("#register").appendTo("#lightBox").css({"top": yRegister, "left": xRegister }).show();
	}
});
// 注册内部点击事件
$(".leftMenu ul").on("click", "li", function(){
	$(this).css({"color": "#fff", "backgroundColor": "#a6deef", "position": "relative"}).siblings().css({"color": "#000", "backgroundColor": "#fbfefe"});
	$(".liImg").appendTo($(this)).css({"top": 0, "left": "142px"});
	var type = $(this).text();
	switch(type){
		case "手机注册":
			$(".leftMenu").css({"height": "369px"});
			$(".telRegister").show().siblings().hide();
			break;
		case "邮箱注册":
			$(".leftMenu").css({"height": "308px"});
			$(".emailRegister").show().siblings().hide();
			break;
		default:
			break;
	}
});
// 点击关闭
$(".closeImg").click(function(){
	$(this).parent().parent().hide().siblings().hide();
	$("#lightBox").hide();
});